@import url('~assets/less/index.less');
@import url('~assets/less/vant-form.less');

.trade_mod {
  &_box {
    &_stock {
      &_info {
        display: flex;
        justify-content: space-between;
        padding: 12px;

        .title {
          font-size: 12px;
          font-family: Roboto-Regular, Roboto;
          color: #6c7993;
        }

        .info-left {
          width: 170px;

          h1 {
            font-size: 20px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            margin: 5px 0;
          }
        }

        .info-right {
          flex: 1;
          display: flex;
          flex-wrap: wrap;

          .every {
            width: 90px;

            p {
              margin-top: 4px;
              color: #dde2ec;
            }
          }
        }
      }

      &_echarts {
        &_time {
          /deep/.van-tab {
            font-size: 12px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #6c7993;
          }

          /deep/.van-tab--active {
            color: #fdc706;
          }
        }

        &_data1 {
          padding: 12px;

          p {
            font-size: 12px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;

            .time {
              color: #6c7993;
            }

            .o {
              margin: 0 4px 0 8px;
              color: #0bba99;
            }

            .h {
              margin: 0 8px 0 4px;
              color: #0bba99;
            }

            .l {
              color: #ee3e57;
            }
          }
        }

        .viewdata {
          padding: 6px 0;

          p {
            transform: scale(0.93);
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;

            .time {
              color: #6c7993;
            }

            .o {
              margin: 0 2px 0 4px;
              color: #daab51;
            }

            .h {
              margin: 0 4px 0 2px;
              color: #0bba99;
            }

            .l {
              color: #8e55e4;
            }
          }
        }

        &_view1 {
          width: 100%;
          height: 400px;
        }

        &_view2 {
          width: 100%;
          height: 83.5px;
        }

        &_view3 {
          width: 100%;
          height: 95px;
        }
      }
    }

    &_btn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 80px;

      .van-button {
        width: 160px;
        height: 32px;
        border-radius: 200px;
        border: 1px solid #000000;
        background-color: transparent;
        padding: 0;
        font-family: Roboto-Regular, Roboto;
        color: #6c7993;
        font-size: 12px;

        &:first-child {
          margin-right: 12px;
        }
      }
    }

    &_footer {
      position: sticky;
      bottom: 52px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px;

      /deep/.van-checkbox__label {
        color: none;
        line-height: normal;
      }

      div {
        .van-button {
          width: 64px;
          height: 40px;
          border-radius: 4px;
          opacity: 1;

          &:first-child {
            margin-left: 12px;
          }
        }
      }
    }

    .l-s-popup {
      background-color: @white;
      font-family: Roboto-Medium, Roboto;

      /deep/.van-tabs__nav {
        background-color: @white;
      }

      /deep/.van-tab--active {
        color: #fdc706;
      }

      &-content {
        margin: 12px;

        .info {
          padding: 12px;
          background-color: #f3f3f3;

          p {
            display: flex;
            justify-content: space-between;

            &:nth-child(2) {
              margin: 4px 0;
            }

            .info-left {
              color: #878999;
              font-size: 14px;
            }

            .info-right {
              font-size: 14px;
              font-family: Roboto-Medium, Roboto;
              font-weight: 500;
              color: #1a1a1a;
            }
          }
        }

        .chooes-time {
          margin: 12px 0;

          & > p {
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #878999;
            margin-bottom: 8px;
          }

          .time {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 7.5px;
            width: 100%;
            &::-webkit-scrollbar {
              display: none;
            }

            .time-every {
              min-width: 76px;
              border-radius: 8px;
              overflow: hidden;
              margin-right: 8px;

              h1 {
                height: 32px;
                line-height: 32px;
                text-align: center;
                background-color: #dbdce0;
                font-size: 18px;
                font-family: Roboto-Bold, Roboto;
                font-weight: bold;
                color: #1a1a1a;
              }

              p {
                height: 24px;
                line-height: 24px;
                text-align: center;
                background: #f3f3f3;
                font-size: 12px;
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                color: #abacb7;
              }
            }

            .expiryTimeActive {
              h1 {
                background-color: #daab51;
                color: #ffffff;
              }

              p {
                background-color: #e1bc74;
                color: #ffffff;
              }
            }
          }
        }

        .buy-quantity {
          margin-bottom: 12px;
          color: #878999;

          .van-cell {
            margin: 8px 0;
            background-color: #f3f3f3;
            border-radius: 4px;

            /deep/input {
              font-family: Roboto-Regular, Roboto;
            }
          }

          & > div {
            display: flex;
            justify-content: space-between;
            color: #878999;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
          }
        }

        .btn {
          padding: 12px;

          .van-button {
            width: 100%;
            border-radius: 200px;
            font-family: Roboto-Medium, Roboto;
          }
        }
      }
    }

    .place-popup {
      width: 280px;
      background-color: @white;
      border-radius: 8px;

      &-title {
        position: relative;
        height: 48px;
        line-height: 48px;

        p {
          font-size: 14px;
          font-family: Roboto-Medium, Roboto;
          font-weight: 500;
          color: #daab51;
          text-align: center;
        }

        i {
          position: absolute;
          top: 16px;
          right: 16px;
          font-size: 16px;
          color: #878999;
        }
      }

      &-content {
        margin: 12px;

        .box {
          /* 最外层的盒子 */
          width: 130px;
          height: 130px;
          margin: 0 auto;
          position: relative;
          overflow: hidden;
          border-radius: 50%;
          background-color: #ffffff;

          .left_box,
          .right_box {
            /* 
              左右两边用于 隐藏 旋转的div的盒子 
              通过overflow来隐藏内部div旋转出去的部分
            */
            position: absolute;
            top: 0;
            width: 65px;
            height: 130px;
            overflow: hidden;
            z-index: 1;

            &.left_box {
              left: 0;
            }

            &.right_box {
              right: 0;
            }
          }

          .left_item,
          .right_item {
            /* 
              这是需要旋转的div(没有被mask遮盖展示出来的部分作为倒计时的线条)
              为了方便理解，下面用deeppink和cyan分别设置了左右两边div的颜色
            */
            width: 65px;
            height: 130px;
          }

          .left_item {
            /*
            1.设置圆角，圆角大小为高度的一半
            2.这只旋转的中心店，这是左边圆，中心点设置到右边中心点，右边圆则设置到左边中心点
            */
            border-top-left-radius: 65px;
            border-bottom-left-radius: 65px;
            -webkit-transform-origin: right center;
            transform-origin: right center;
            animation-name: loading_left;
            animation-timing-function: linear;
            background-color: #daab51;
          }

          .right_item {
            border-top-right-radius: 65px;
            border-bottom-right-radius: 65px;
            -webkit-transform-origin: left center;
            transform-origin: left center;
            animation-name: loading_right;
            animation-timing-function: linear;
            background-color: #daab51;
          }

          .mask {
            /* 遮住div多余的部分，呈现出线条的效果 */
            position: absolute;
            top: 15px;
            left: 15px;
            right: 15px;
            bottom: 15px;
            z-index: 2;
            border-radius: 50%;
            color: #1a1a1a;
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;

            .datatime {
              color: #ee3e57;
              font-size: 16px;
            }
          }

          @-webkit-keyframes loading_left {
            0% {
              -webkit-transform: rotate(0deg);
            }

            50% {
              -webkit-transform: rotate(0deg);
            }

            100% {
              -webkit-transform: rotate(180deg);
            }
          }

          @-webkit-keyframes loading_right {
            0% {
              -webkit-transform: rotate(0deg);
            }

            50% {
              -webkit-transform: rotate(180deg);
            }

            100% {
              -webkit-transform: rotate(180deg);
            }
          }
        }

        &-echarts {
          height: 170px;
          background-color: #0bba99;
        }

        &-continue {
          margin: 12px 0;
          padding: 24px 0;
          text-align: center;

          h1 {
            font-size: 24px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #daab51;
          }

          p {
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            color: #878999;
          }
        }

        &-info {
          padding: 12px;
          background-color: #f3f3f3;
          border-radius: 4px;
          margin-top: 12px;

          p {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;

            &:not(:first-child) {
              margin-top: 8px;
            }

            .label {
              color: #878999;
            }

            .value {
              font-weight: 600;
              color: #1a1a1a;
            }
          }
        }
      }

      &-footer {
        text-align: center;
        margin-bottom: 12px;

        .van-button {
          width: 200px;
          font-size: 16px;
          font-family: Roboto-Regular, Roboto;
        }
      }
    }
  }
}
